<script setup lang="ts">
import { inject } from "vue";

const printToTerm = inject('printToTerm') as (msg: string, level: 'info' | 'error' | 'warn' | 'command' | 'debug') => void; // 注入printToTerm方法，供子组件使用
const setTaskBar = inject('setTaskBar') as (text: string, progress: number) => void; // 注入setTaskBar方法，供子组件使用
const openDrawer = inject('openDrawer') as () => void; // 注入openDrawer方法，供子组件使用

/**
 * 终端测试
 */
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

const testTerminal = async () => {
  openDrawer();
  for (let i = 0; i < 10; i++) {
    printToTerm(`调用printToTerm()方法打印到终端，第${i + 1}次`, 'debug');
    await sleep(1000); // 等待1秒
  }
}

const testTerminalFromPython = () => {
  openDrawer();
  // @ts-ignore
  if (!window.pywebview) { // 判断是否是在Python中运行，如果是则调用Python的printToTerm方法
    printToTerm('未检测到pywebview组件，只有pywebview中才支持Python调用Javascript', 'warn'); // 如果不是在Python中运行，则调用printToTerm方法
    return;
  }
  // @ts-ignore
  window.pywebview.api.printToTerm('Python中调用printToTerm()方法打印到终端', 'debug');
}

const setTaskBar1 = () => {
  setTaskBar('设置任务栏信息', 50); // 调用setTaskBar方法，设置任务栏信息和进度条的进度值，这里的50是进度条的进度值，0-100，这里是50%的进度条
}

const setTaskBarFromPython = () => {
  // @ts-ignore
  if (!window.pywebview) { // 判断是否是在Python中运行，如果是则调用Python的printToTerm方法
    openDrawer();
    printToTerm('未检测到pywebview组件，只有pywebview中才支持Python调用Javascript', 'warn'); // 如果不是在Python中运行，则调用printToTerm方法
    return;
  }
  // @ts-ignore
  window.pywebview.api.setTaskBar('Python设置任务栏信息', 60); // 调用setTaskBar方法，设置任务栏信息和进度条的进度值，这里的50是进度条的进度值，0-100，这里是50%的进度条
}
</script>

<template>
  <div id="工作区" class="container bg-blue-100">
    <button class="m-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-600" @click="openDrawer()">
      打开终端抽屉
    </button>
    <button class="m-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-600" @click="testTerminal()">
      终端测试
    </button>
    <button class="m-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-600" @click="testTerminalFromPython()">
      Python终端测试
    </button>
    <button class="m-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-600" @click="setTaskBar1()">
      设置任务栏信息
    </button>
    <button class="m-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-600" @click="setTaskBarFromPython()">
      Python设置任务栏信息
    </button>
  </div>
</template>

<style lang="postcss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 1rem;
}
</style>
